<template>
  <div class="login-container">
    <div class="background-image"></div>
    <form @submit.prevent="handleSubmit" class="login-form">
      <h1>{{ formType === 'login' ? '登录' : '注册' }}</h1>
      <div v-if="formType === 'register'" class="input-group">
        <label for="username">用户名:</label>
        <input type="text" id="username" v-model="username" required />
      </div>
      <div class="input-group">
        <label for="account">账号:</label>
        <input type="text" id="account" v-model="account" required />
      </div>
      <div class="input-group">
        <label for="password">密码:</label>
        <input type="password" id="password" v-model="password" required />
      </div>
      <div v-if="formType === 'register'" class="input-group">
        <label for="confirmPassword">确认密码:</label>
        <input type="password" id="confirmPassword" v-model="confirmPassword" required />
      </div>
      <div v-if="formType === 'register'" class="input-group">
        <label for="email">邮箱:</label>
        <input type="email" id="email" v-model="email" required />
      </div>
      <div class="remember-me">
        <input type="checkbox" id="rememberMe" v-model="rememberMe" />
        <label for="rememberMe">记住我</label>
      </div>
      <button type="submit" :disabled="isSubmitting">{{ formType === 'login' ? '登录' : '注册' }}</button>
      <div class="switch-form">
        <a href="#" @click.prevent="switchForm">{{ formType === 'login' ? '还没有账号？去注册' : '已有账号？去登录' }}</a>
      </div>
      <a href="#" @click.prevent="handleForgotPassword">忘记密码?</a>
    </form>
  </div>
</template>


<script>
import axios from 'axios'; // 引入axios

export default {
  data() {
    return {
      username: '',
      password: '',
      account: '',
      confirmPassword: '', // 新增确认密码
      email: '', // 新增邮箱
      rememberMe: false,
      isSubmitting: false,
      formType: 'login' // 控制显示登录还是注册表单
    };
  },
  methods: {
    async handleSubmit() {
      this.isSubmitting = true;

      try {
        let response;
        if (this.formType === 'login') {
          // 使用 POST 请求发送数据
          response = await axios.post('http://localhost:8080/login', {
            account: this.account,
            password: this.password
          });
        } else {
          if (this.password !== this.confirmPassword) {
            throw new Error('密码和确认密码不一致！');
          }
          response = await axios.post('http://localhost:8080/register', {
            username: this.username,
            account: this.account,
            password: this.password,
            email: this.email
          });
        }

        if (response.data && response.data.code === 10000) {
          if (this.formType === 'login') {
            // 登录成功，跳转到主页
            this.$router.push('/');
            alert('登录成功！');
          } else {
            // 注册成功，提示并切换到登录表单
            alert('注册成功！请登录。');
            this.switchForm();
          }
        } else {
          console.error('操作失败:', response.data.data.message || '未知错误');
          alert('操作失败，请检查用户名或密码。');
        }
      } catch (error) {
        console.error('操作失败:', error);
        alert('操作失败，请稍后再试。');
      } finally {
        this.isSubmitting = false;
      }
    },
    switchForm() {
      this.formType = this.formType === 'login' ? 'register' : 'login';
      this.username = '';
      this.password = '';
      this.confirmPassword = ''; // 清空确认密码
      this.email = ''; // 清空邮箱
    },
    handleForgotPassword() {
      alert('请检查您的邮箱获取重置密码的指示。');
    }
  }
};
</script>


<style scoped>

.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-image: url("../assets/images/background.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: -1;
}

.login-form {
  width: 300px;
  background-color: transparent; /* 设置背景为透明 */
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(5px); /* 添加模糊效果 */
  border: 1px solid rgba(255, 255, 255, 0.5); /* 可选: 添加边框以增加对比度 */
}

.input-group {
  margin-bottom: 15px;
}

label {
  display: block;
  margin-bottom: 5px;
}

input[type="text"],
input[type="password"] {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.remember-me {
  margin-bottom: 10px;
}

button {
  width: 100%;
  padding: 10px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: #0056b3;
}

button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

a {
  display: block;
  text-align: right;
  color: #007bff;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}
</style>